<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 实例讲解-图片翻转切换 </title>
    <script src="jquery.js"></script>
    <style>
        body,ul, h2{
            margin:0; padding:0;
        }
        .wrapper{
            width:400px;
            margin:30px auto;
            border:solid 1px #ccc;
            box-shadow: 0 1px 2px #ccc;
        }
        .wrapper h2{
            font-size:20px;
            text-align: center;
            border-bottom: solid 2px #666;
            line-height:50px;
            color:#666;
        }
        .list{
            list-style: none;
            margin:10px 20px;
            overflow: hidden;
        }
        .list li{
            width:43%;
            float:left;
            margin:11px;
            position: relative;
            height:97px;
            cursor:pointer;
        }
        .list li img{
            display:block;
            width:100%;
            position: relative;
            z-index: 3;
            border:solid 1px #ccc;
        }
        .list li span{
            display:block;
            width:100%;
            line-height:97px;
            text-align: center;
            background:#ff6600;
            color:#fff;
            position:absolute;
            top:47px;
            height:0;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <h2> 热门品牌推荐 </h2>
    <ul class="list">
        <li>
            <img src="images/11.jpg" alt=""/>
            <span> 品牌推荐 </span>
        </li>
        <li>
            <img src="images/22.jpg" alt=""/>
            <span> 品牌推荐 </span>
        </li>
        <li>
            <img src="images/11.jpg" alt=""/>
            <span> 品牌推荐 </span>
        </li>
        <li>
            <img src="images/22.jpg" alt=""/>
            <span> 品牌推荐 </span>
        </li>
        <li>
            <img src="images/11.jpg" alt=""/>
            <span> 品牌推荐 </span>
        </li>
        <li>
            <img src="images/22.jpg" alt=""/>
            <span> 品牌推荐 </span>
        </li>
        <li>
            <img src="images/11.jpg" alt=""/>
            <span> 品牌推荐 </span>
        </li>
        <li>
            <img src="images/22.jpg" alt=""/>
            <span> 品牌推荐 </span>
        </li>
    </ul>
</div>
</body>
<script>
    $('.list li').hover(function(){
        $(this).find('img').stop()
        $(this).find('span').stop()
        // this --> li标签
        $(this).find('img').animate({
            height:0,
            top:47
        }, 150, function(){
            // this-->img标签
            $(this).hide()
            $(this).next().animate({
                height:97,
                top:0
            }, 150)
        })
    }, function(){
        $(this).find('img').stop()
        $(this).find('span').stop()
        $(this).find('span').animate({
            height:0,
            top:47
        }, 150, function(){
            $(this).prev().show().animate({
                height:97,
                top:0
            }, 150)
        })
    })
</script>
</html>